How to Automatically Sort TypeScript Imports in VS Code on Save ?

Managing imports in a TypeScript project can quickly become messy, especially as files grow and dependencies increase. Unsorted imports can make code harder to read and maintain. Fortunately, Visual Studio Code (VS Code) provides a way to automatically organize imports every time you save a file.

In this post, you’ll learn how to set up VS Code to automatically sort and clean up TypeScript imports, improving your workflow and keeping your codebase tidy with minimal effort. Whether you’re working on a small project or a large codebase, this simple configuration can help maintain consistency and readability in your files.

To automatically sort TypeScript imports on save in VS Code, follow these steps:

1. Enable Organize Imports on Save

   Add the following setting to your VS Code settings (settings.json):

    {
        "editor.codeActionsOnSave": {
            "source.organizeImports": true
        }
    }
   

2. Use Prettier with prettier-plugin-organize-imports

   If you’re using Prettier, install the prettier-plugin-organize-imports package:

    npm install --save-dev prettier-plugin-organize-imports
   

3. Then, update your .prettierrc:

{
  "plugins": ["prettier-plugin-organize-imports"]
}

Now, Prettier will organize imports whenever it formats the code. It will also remove unused imports.